<template>
  <Dialog
    v-model="show"
    @confirm="handleSubmit"
    @close="close"
    :title="t('service.编辑售后')"
    width="800px"
    :confirmLoading="confirmLoading"
  >
    <div class="">
      <el-form ref="formRef" :model="form" label-width="200px" :rules="rules">
        <el-form-item :label="t('service.请选择菜品')" prop="skuId">
          <el-select
            v-model="form.skuId"
            :placeholder="t('service.请选择菜品')"
            multiple
          >
            <el-option
              v-for="item in props.data.saleSkus"
              :key="item.skuId"
              :label="item['skuName' + locale]"
              :value="item.skuId"
            />
          </el-select>
        </el-form-item>
        <el-form-item
          :label="t('service.请选择退款原因')"
          prop="refundAskReasonId"
        >
          <el-select
            v-model="form.refundAskReasonId"
            :placeholder="t('service.退款原因')"
            multiple
          >
            <el-option
              v-for="item in refundReasonOptions"
              :key="item.id"
              :label="item['name' + locale]"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item :label="t('service.退款金额')" prop="refundAskPayTotal">
          <el-input
            v-model="form.refundAskPayTotal"
            :placeholder="t('service.退款金额')"
            type="number"
          />
        </el-form-item>
        <el-form-item :label="t('service.备注')" prop="refundAskRemark">
          <el-input
            v-model="form.refundAskRemark"
            :placeholder="t('service.备注')"
            type="textarea"
            :rows="3"
          />
        </el-form-item>
      </el-form>
    </div>
  </Dialog>
</template>

<script setup>
import { ref, watch, onMounted } from "vue";
import { useI18n } from "vue-i18n";
import Dialog from "@/components/dialog.vue";
import Api from "@/config/api/api";
import { ElMessage } from "element-plus";

const { t, locale } = useI18n();

const show = defineModel();
const emit = defineEmits(["success"]);
const props = defineProps({
  data: {
    type: Object,
    default: () => ({}),
  },
});

const formRef = ref();
const confirmLoading = ref(false);

// 售后类型选项
const serviceTypeOptions = [
  { label: t("service.退款"), value: 1 },
  { label: t("service.退货退款"), value: 2 },
  { label: t("service.换货"), value: 3 },
  { label: t("service.仅退款"), value: 4 },
];

const form = ref({
  type: "",
  reason: "",
  refundAmount: 0,
  returnAddress: "",
});

const rules = ref({
  skuId: [
    { required: true, message: t("service.请选择菜品"), trigger: "change" },
  ],
  refundAskReasonId: [
    { required: true, message: t("service.请选择退款原因"), trigger: "change" },
  ],
  refundAskPayTotal: [
    { required: true, message: t("service.请输入退款金额"), trigger: "blur" },
  ],
  // refundAskRemark: [
  //   { required: true, message: t("service.请输入备注"), trigger: "blur" },
  // ],
});

watch(show, (val) => {
  if (val && props.data.id) {
    // 填充表单数据
    form.value = {
      skuId: props.data.saleSkus.map((item) => item.skuId),
      refundAskReasonId: props.data.refundAskReasonId,
      refundAskPayTotal: props.data.refundAskPayTotal || 0,
      refundAskRemark: props.data.refundAskRemark || "",
    };
  }
});

const handleSubmit = () => {
  formRef.value.validate(async (valid) => {
    if (valid) {
      confirmLoading.value = true;
      Api.serviceUpdate({
        ...form.value,
        id: props.data.id,
      })
        .then((res) => {
          if (res.status === 200) {
            ElMessage.success(t("service.编辑成功"));
            close();
            emit("success");
          }
        })
        .finally(() => {
          confirmLoading.value = false;
        });
    }
  });
};

const close = () => {
  form.value = {
    skuId: [],
    refundAskReasonId: [],
    refundAskPayTotal: 0,
    refundAskRemark: "",
  };
  show.value = false;
  formRef.value.resetFields();
};

const refundReasonOptions = ref([]);
const getRefundReasonOptions = () => {
  Api.reasonList({
    type: 5,
  }).then((res) => {
    refundReasonOptions.value = res.data.content || [];
  });
};

onMounted(() => {
  getRefundReasonOptions();
});
</script>

<style lang="scss" scoped>
.h-500 {
  height: 500px;
}
.lht-38 {
  line-height: 38px;
}
.w-120 {
  width: 120px;
}
</style>
